class Details{
    constructor() {
        //获取元素
        this.pic = document.querySelector('.gnl-1>img')
        this.pic1 = document.querySelector('.bigBox>img')
        this.dtl = document.querySelector('.gs-intro')
        this.h2 =document.querySelector('h2')
        this.price =document.querySelector('.p-left>div>b')
        this.init()
    }
    init() {
        this.request()
    }
    //查询字符串处理
    queryStr(name) {
        //?id=2&username=zhangsan
        let str = location.search
        let obj = {}
        let arr = str.split('?')[1]
        arr = arr.split('&')
        arr.forEach(item => {
            let newArr = item.split('=')
            obj[newArr[0]] = newArr[1]
        })
        return obj[name]
    }
    //发送请求
    request() {
        let id = this.queryStr('id')
        pAjax({ url: '../data/goods.json' })
            .then(res => {
                let data = JSON.parse(res)
                data = data.slice(100, 160)
                data.forEach(item => {
                    if (item.goods_id == id) {
                        this.render(item)
                    }
                })
        })
    }
    //渲染页面
    render(data) {
        //img_small_logo
        //goods_introduce
        // console.log(data)
        this.pic.src = data.img_small_logo
        this.pic1.src = data.img_small_logo
        this.dtl.innerHTML = data.goods_introduce
        this.h2.innerHTML = data.title
        this.price.innerHTML=data.price
    }
}
new Details()

//放大镜效果
class Zoom{
    constructor(ele1, ele2, ele3, ele4){
        //获取元素，应该把获取到的元素设置成对象的属性
        this.smallBox = document.querySelector(ele1)
        this.mask = document.querySelector(ele2)
        this.bigBox = document.querySelector(ele3)
        this.pic = document.querySelector(ele4)
        this.init()
    }
    //在这里写的方法相当于就是放在prototype原型对象里面
    init(){
        this.over()
        this.out()
        this.move()
    }
    over(){
        this.smallBox.onmouseover = () => {
            this.mask.style.display = 'block'
            this.bigBox.style.display = 'block'
        }
    }
    out(){
        this.smallBox.onmouseout = () => {
            this.mask.style.display = 'none'
            this.bigBox.style.display = 'none'
        }
    }
    move(){
        this.smallBox.onmousemove = (e) => {
            e = e || window.event
            //获取鼠标坐标  offsetParent具有定位流的父元素
            let x = e.pageX - this.smallBox.offsetParent.offsetLeft - this.mask.offsetWidth / 2
            let y = e.pageY - this.smallBox.offsetParent.offsetTop - this.mask.offsetHeight / 2
            //边界值判断
            if (x <= 0) {
                x = 0
            } else if (x >= this.smallBox.offsetWidth - this.mask.offsetWidth) {
                x = this.smallBox.offsetWidth - this.mask.offsetWidth
            }
            if (y <= 0) {
                y = 0
            } else if (y >= this.smallBox.offsetHeight - this.mask.offsetHeight) {
                y = this.smallBox.offsetHeight - this.mask.offsetHeight
            }
            //进行赋值操作
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
            //计算比例
            let w = x / (this.smallBox.offsetWidth - this.mask.offsetWidth)
            let h = y / (this.smallBox.offsetHeight - this.mask.offsetHeight)
            //给大图进行赋值操作
            this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
            this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'
        }
    }
}
new Zoom('.gnl-1','.mask','.bigBox','.bigBox>img')

//加减数量
$('.increase').click(()=>{
    console.log(111);
    let num = $('.num-1-1')[0].value
    console.log(num);
    num++
    $('.num-1-1')[0].value =num
})
$('.reduce').click(()=>{
    console.log(222);
    let num = $('.num-1-1')[0].value
    num--
    if(num<=1){
        num=1
    }
    $('.num-1-1')[0].value =num
})
